import React, { Component } from 'react';
import { StyleSheet, ScrollView } from 'react-native';
import { View, Gradient, Text } from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

class GradientScreen extends Component {
  render() {
    return (
      <TestSuite name="Gradient">
        <TestCase itShould="color">
          <Text>
            color:green
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'green'} numberOfSteps={4} />
          </View>
          <Text>
            color:red
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'red'} numberOfSteps={4} />
          </View>
        </TestCase>

        <TestCase itShould="numberOfSteps">
          <Text>
            numberOfSteps: 3
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'green'} numberOfSteps={3} type="lightness" />
          </View>
          <Text>
            numberOfSteps: 5
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'green'} numberOfSteps={5} type="lightness" />
          </View>
        </TestCase>

        <TestCase itShould="style">
          <Text>
            style: height=10, width="50%", margin: 5
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10, width: "50%", margin: 5 }} color={'green'} numberOfSteps={4} type="lightness" />
          </View>
          <Text>
            style: height=20, width="100%", margin: 25
          </Text>
          <View padding-20>
            <Gradient style={{ height: 20, width: "100%", margin: 25 }} color={'green'} numberOfSteps={4} type="lightness" />
          </View>
        </TestCase>

        <TestCase itShould="type">
          <Text>
            type: hue
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'green'} numberOfSteps={5} type="hue" />
          </View>
          <Text>
            type: lightness
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'green'} numberOfSteps={5} type="lightness" />
          </View>
          <Text>
            type: saturation
          </Text>
          <View padding-20>
            <Gradient style={{ height: 10 }} color={'green'} numberOfSteps={5} type="saturation" />
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default GradientScreen;

const styles = StyleSheet.create({});
